<template>
  <!-- 画布 -->
  <de-canvas
    ref="canvasMainRef"
    class="cd-canvas"
    :style="customCanvasStyle"
    :canvas-style-data="canvasStyleData"
    :component-data="mainCanvasComponentData"
    :canvas-id="canvasId"
    :canvas-pid="'0'"
    @canvasScroll="canvasScroll"
  />
</template>
<script>
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import { getNowCanvasComponentData, imgUrlTrans } from '@/components/canvas/utils/utils'

import DeCanvas from '@/components/canvas/DeCanvas'

export default {
  name: 'ChartDesignEdit',
  components: { DeCanvas },
  data() {
    return {
      viewType: 'add',
      adviceGroupId: '',
      canvasId: 'canvas-main',
      scrollLeft: 0,
      scrollTop: 0,
      rightDrawOpen: false,
    }
  },
  computed: {
    ...mapState({
      componentGap: 'componentGap',
      componentData: 'componentData',
      canvasStyleData: 'canvasStyleData',
      curCanvasScaleMap: 'curCanvasScaleMap',
      curComponent: 'curComponent',
      panelInfo: (state) => state.panel.panelInfo || {},
    }),
    curCanvasScaleSelf() {
      return this.curCanvasScaleMap[this.canvasId]
    },
    customCanvasStyle() {
      let style = {
        padding: this.componentGap + 'px',
      }

      if (this.canvasStyleData.openCommonStyle) {
        if (
          this.canvasStyleData.panel.backgroundType === 'image' &&
          typeof this.canvasStyleData.panel.imageUrl === 'string'
        ) {
          style = {
            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
            ...style,
          }
        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
          style = {
            background: this.canvasStyleData.panel.color,
            ...style,
          }
        }
      }
      return style
    },
    mainCanvasComponentData() {
      return getNowCanvasComponentData(this.canvasId)
    },
  },
  methods: {
    canvasScroll(scrollInfo) {
      this.scrollLeft = scrollInfo.scrollLeft
      this.scrollTop = scrollInfo.scrollTop
      bus.$emit('onScroll')
    },
  },
}
</script>
<style lang="scss" scoped>
.cd-canvas {
  ::v-deep .bar-main {
    display: none;
  }
}
</style>
